<template>
<div>
  <h1>waterWave</h1>
  <div>
    <el-button @click="changeData">更改数据</el-button>
  </div>
  <div id="waterWave"></div>
</div>
</template>

<script>
import { Liquid } from '@antv/g2plot'
export default {
    name: 'WaterWave',
    data () {
        return {
            data: [],
            liquidPlot: null
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        changeData () {
            this.liquidPlot.changeData(Math.random())
        },
        init () {
            this.liquidPlot = new Liquid('waterWave', {
                percent: 0.56,
                outline: {
                    border: 4,
                    distance: 8
                },
                liquidStyle: ({ percent }) => {
                    return {
                        fill: percent > 0.5 ? 'yellow' : 'green'
                    }
                },
                colorField: 'type', // 部分图表使用 seriesField
                color: ({ type }) => {
                    if (type === 'male') {
                        return 'red'
                    }
                    return 'yellow'
                },
                wave: {
                    length: 128
                },
                statistic: {
                    title: {
                        content: '水平值 '
                    }
                }
            })
            this.liquidPlot.render()
        }
    }
}
</script>

<style scoped>

</style>
